<template>
  <div class="Home">
    <div class="nav">
      <van-nav-bar title="订单" />
    </div>
    <!-- <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="暂无订单信息"
            />
          </div>
          <div class="order-desc">
            <div class="pro" v-for="(item, index) in item.data" :key="index">
              <van-swipe-cell>
                <div class="orderid">{{ item.oid }}</div>
                <div class="pro-desc">
                  <div class="center">
                    <img class="auto" :src="item.smallImg" alt="" />
                  </div>
                  <div class="right">
                    <div class="name-rule">
                      {{ item.name }}<span>{{ item.rule }}</span>
                    </div>
                    <div class="enname">
                      {{ item.enname }}
                    </div>
                    <div class="proprice">
                      <div class="price">￥{{ item.price }}</div>
                      <div class="count">x{{ item.count }}</div>
                    </div>
                  </div>
                </div>
              </van-swipe-cell>
            </div>
            <div class="deom">
              <div class="time">{{ timers }}</div>
              <div class="allcount">
                <div class="procount">共计{{ prototal }}件</div>
                <div class="pricetotal">合计 ￥{{ pricetotal }}</div>
              </div>
            </div> -->
    <!-- 登录状态 -->
    <div class="tab" v-if="login">
      <van-tabs v-model="active" swipeable animated @change="findOrder">
        <van-tab
          :title="items.title"
          v-for="(items, indexs) in tabs"
          :key="indexs"
        >
          <van-empty
            v-show="nullstyle"
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无订单信息"
          />
          <div
            class="order-desc"
            v-for="(item, index) in orderData[0]"
            :key="index"
          >
            <div class="orderifo">
              <div class="orderid">{{ item.oids }}</div>
              <div class="orderstatus">
                <span v-if="item.status != 2" @click="receive(item.oids)"
                  >确认收货</span
                >
                <span v-if="item.status == 2">已完成 <van-icon name="delete-o" size="16px" @click="delorder(item.oids)" /></span>
              </div>
            </div>
            <div class="pro" v-for="(i, j) in item.data" :key="j">
              <van-swipe-cell>
                <div class="pro-desc">
                  <div class="center">
                    <img class="auto" :src="i.smallImg" alt="" />
                  </div>
                  <div class="right">
                    <div class="name-rule">
                      {{ i.name }}<span>{{ i.rule }}</span>
                    </div>
                    <div class="enname">
                      {{ i.enname }}
                    </div>
                    <div class="proprice">
                      <div class="price">￥{{ i.price }}</div>
                      <div class="count">x{{ i.count }}</div>
                    </div>
                  </div>
                </div>
              </van-swipe-cell>
            </div>
            <div class="deom">
              <div class="time">{{ timers }}</div>
              <div class="allcount">
                <div class="procount">共计{{ item.count }}件</div>
                <div class="pricetotal">合计 ￥{{ item.total }}</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 未登录状态 -->
    <div v-if="!login">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="登录查看订单信息"
      />

      <div class="bt">
        <button class="bt-text" @click="loginView">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      tabs: [{ title: "全部" }, { title: "进行中" }, { title: "已完成" }],
      orderData: [],
      active: 0,
      nullstyle: false,
      timers: "",
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
      login: true,
    };
  },
  created() {
    //判断用户是否登录
    if (this.$cookies.get("TOKEN")) {
      this.login = true;
    } else {
      this.login = false;
    }
    this.findOrder();
    this.getCurrentTime();  
  },
  methods: {
    //删除订单
    delorder(e){
      console.log(e);
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&oid=${e}`;
      this.axios({
        method:"post",
        url:"/removeOrder",
        data:str
      }).then((res)=>{
        console.log(res);
        this.findOrder();
      })
    },
    //获取当前日期
    getCurrentTime() {
      let db = new Date();
      console.log(db);
      //年
      let year = db.getFullYear();
      console.log(year);
      //月
      let month = db.getMonth() + 1;
      console.log(month);
      //日
      let day = db.getDate();
      console.log(day);
      //时
      let hours = db.getHours();
      console.log(hours);
      //分
      let min = db.getMinutes();
      console.log(min);
      //秒
      let sec = db.getSeconds();
      console.log(sec);
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      hours = hours > 9 ? hours : "0" + hours;
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;

      let timer =
        year + "-" + month + "-" + day + "-" + hours + ":" + min + ":" + sec;
      console.log(timer);
      this.timers = timer;
    },
    //空状态
    // null() {
    //   if (this.orderData.result == 0) {
    //     this.nullstyle = true;
    //   } else {
    //     this.nullstyle = false;
    //   }
    // },
    //确认收货
    receive(e) {
      console.log(e);
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&oid=${e}`;
      this.axios({
        method: "post",
        url: "/receive",
        data: str,
      }).then((res) => {
        console.log(res);
        this.findOrder();
        
      });
    },
    findOrder() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          appkey: this.appkey,
          tokenString: this.tokenString,
          status: this.active,
        },
      }).then((res) => {
        if(res.data.result.length==0){
          this.nullstyle =true
        }else{
          this.nullstyle=false
        }
        console.log(res);
        let orders = {};
        this.orderData = [];
        res.data.result.map((v) => {
          if (!orders[v.oid]) {
            orders[v.oid] = {
              oids: v.oid,
              count: v.count,
              status: v.status,
              total: v.count * v.price,
              data: [v],
            };
          } else {
            orders[v.oid].count += v.count;
            orders[v.oid].total += v.count * v.price;
            orders[v.oid].data.push(v);
          }
        });
        this.orderData.push(orders);
        console.log(this.orderData);
        
      });
    },
    loginView() {
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-icon-delete-o:before{
  margin: 0 10px;
}
.orderifo {
  display: flex;
  .orderstatus {
    margin-left: auto;
  }
}
.Home {
  padding-bottom: 100px;
}
.pro {
  background-color: #fff;
  margin-top: 10px;
}
.pro-desc {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  .center {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 10px;
  }
  .right {
    flex: 1;
    height: 100px;
    .name-rule {
      font-size: 14px;
    }
    .enname {
      color: #acacac;
      margin-top: 10px;
    }
    .name-rule span {
      font-size: 12px;
      margin-left: 12px;
      color: #acacac;
    }
    .proprice {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 14px;
        font-weight: bold;
        color: #0c34ba;
      }
      .count {
        margin-right: 18px;
      }
    }
  }
}
.demo {
  border-bottom: 1px dashed #000;
  height: 200px;
  background-color: red;
}
.order-desc {
  margin: 8px 6px;
  background-color: #fff;
  padding: 5px;
  border-radius: 10px;
  padding-bottom: 20px;
}
.allcount {
  justify-content: space-between;
  display: flex;
  margin-top: 20px;
  .pricetotal {
    margin-right: 10px;
    font-weight: bold;
    color: #0c34ba;
    font-size: 12px;
  }
}
.bt {
  margin-left: 165px;
}
.bt-text {
  font-size: 18px;
  background-color: red;
  text-align: center;
}
</style>